<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <Card class="card">
        <p slot="title">
          添加电影
        </p>
        <Form ref="formInline" :model="formInline" :label-width="100">
          <Row>
            <i-col span="8" offset="8">
              <FormItem prop="movieName" label="电影名称">
                <i-input
                  type="text"
                  v-model="formInline.movieName"
                  placeholder="MovieName"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8" offset="8">
              <FormItem prop="movieImg" label="电影图片地址">
                <i-input
                  type="text"
                  v-model="formInline.movieImg"
                  placeholder="MovieImg"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8" offset="8">
              <FormItem prop="movieVideo" label="电影视频地址">
                <i-input
                  type="text"
                  v-model="formInline.movieVideo"
                  placeholder="MovieVideo"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8" offset="8">
              <FormItem prop="movieDownload" label="电影下载地址">
                <i-input
                  type="text"
                  v-model="formInline.movieDownload"
                  placeholder="MovieDownload"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8" offset="8">
              <FormItem prop="movieMainPage" label="是否主页推荐">
                <RadioGroup v-model="formInline.movieMainPage">
                  <Radio :label="1">是</Radio>
                  <Radio :label="0">否</Radio>
                </RadioGroup>
              </FormItem>
            </i-col>
          </Row>
        </Form>
        <Row>
          <i-col span="8" offset="8">
            <Button type="primary" @click="addMovie('formInline')">
              添加
            </Button>
          </i-col>
        </Row>
      </Card>
    </div>

    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '@/components/MovieHeader'
import MovieFooter from '@/components/MovieFooter'

export default {
  components: {
    MovieHeader,
    MovieFooter
  },
  data() {
    return {
      formInline: {
        movieName: '',
        movieImg: '',
        movieVideo: '',
        movieDownload: '',
        movieMainPage: 1
      }
    }
  },
  methods: {
    addMovie(name) {
      const formData = {
        id: localStorage.getItem('_id'),
        token: localStorage.getItem('token'),
        username: localStorage.getItem('username'),
        movieName: this.formInline.movieName,
        movieImg: this.formInline.movieImg,
        movieVideo: this.formInline.movieVideo,
        movieDownload: this.formInline.movieDownload,
        movieMainPage: this.formInline.movieMainPage === 1 ? true : false
      }
      this.$http
        .post('http://localhost:3000/admin/movieAdd', formData, {
          emulateJSON: true
        })
        .then(({ body }) => {
          const { status, message } = body
          if (status === 200) {
            this.$Message.success({
              content: message,
              duration: 2,
              closable: true
            })
            this.$refs[name].resetFields()
          }
        })
    }
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
</style>
